<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>朔望 -用户主页</title>
    <!--    Rem初始-->
    <script>
        const font_size = document.documentElement.clientWidth;   /* 获取布局视口的宽度，也就是浏览器宽度*/
        document.documentElement.style.fontSize = font_size * 0.991 + 'px'   /* 设置 html的font-size属性*/
    </script>
    <!--    <script th:inline="javascript" src="/Syzygy/static/js/userHomePage.js"></script>-->
</head>
<body style="margin: 0 0 ;padding: 0 0 ">
<!--背景图 用户信息 -->
<div style="width: 1rem;height: 0.25rem;">
    <!--    用户背景图-->
    <div id="userBackgroundImage" style="width: 1rem;height: 0.25rem;background-size: cover">
        <!--    导航栏-->
        <div style="width:1rem;height: 0.04rem;position: absolute;z-index: 2">
            <!--        logo-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <img src="/Syzygy/static/imgs/page/logo.png"
                     style="float: left;width: 0.07rem;height: 0.03rem;margin: 0.005rem 0.015rem">
            </div>
            <!--        导航1-->
            <a href="/Syzygy/">
                <div style="float:left;width: 0.1rem;height:0.04rem;">
                    <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                        主页
                    </div>
                </div>
            </a>
            <!--        导航2-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航2
                </div>
            </div>
            <!--        导航3-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航3
                </div>
            </div>
            <!--        导航4-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航4
                </div>
            </div>
            <!--        注销 -->
            <div th:if="${userIdSession}" style="float:right;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                    <a href="/Syzygy/User/Logout" style="color:white;text-decoration: none;">
                        注销
                    </a>
                </div>
            </div>
            <!--        创作者中心 -->
            <div th:if="${userIdSession}" style="float:right;width: 0.12rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                    <a href="/Syzygy/User/Manage" style="color:white;text-decoration: none;">
                        创作者中心
                    </a>
                </div>
            </div>
            <!--        信息编辑 -->
            <div th:if="${userIdSession}" style="float:right;width: 0.12rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                    <a href="/Syzygy/User/Edit" style="color:white;text-decoration: none;">
                        信息编辑
                    </a>
                </div>
            </div>
        </div>
        <!--    头像及昵称与个人签名-->
        <div style="color: rgba(20,20,20,0.5);width: 1rem;height: 0.06rem;position: relative;top: 70%">
            <!--            头像-->
            <div style="float:left;width: 0.06rem;height: 0.06rem;margin: 0 0 0 0.04rem">
                <img th:src="@{'/static/imgs/headsculpture/' + ${userByUserId.headSculptureDocumentName}}"
                     style="width: 0.06rem;height: 0.06rem;float: left">
            </div>
            <!--            昵称与个人签名 -->
            <div style="float:left;margin: 0 0 0.01rem 0.01rem;color: white">
                <div th:text="${userByUserId.nickname}" style="font-size: 0.03rem;">

                </div>
                <div th:text="${userByUserId.personalIntroduction}"
                     style="font-size: 0.015rem;background: rgba(200,200,200,0.8)">

                </div>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        const userByUserIdJSON = [[${userByUserIdJSON}]];
        let userByUserId = JSON.parse(userByUserIdJSON);
        console.log(userByUserId.backgroundImageDocumentName);
        if(userByUserId.backgroundImageDocumentName == null || userByUserId.backgroundImageDocumentName == ""){
            document.getElementById('userBackgroundImage').style.backgroundImage =
                "url(" + "/Syzygy/static/imgs/pictures/oFREHNLl7m.jpeg)";
        }else {
            document.getElementById('userBackgroundImage').style.backgroundImage =
                "url(" + "/Syzygy/static/imgs/pictures/" + userByUserId.backgroundImageDocumentName + ")";
        }
    </script>
</div>
<!--  个人信息导航栏    -->
<div style="width: 1rem;height: 0.05rem;background: rgb(240,240,240);font-size: 0.02rem;color: black;padding: 0 0.04rem;box-sizing: border-box">
    <div style="float:left;margin: 0.01rem 0;width:0.09rem;height: 0.03rem">
        <img src="/Syzygy/static/imgs/page/c1.png" style="float:left;width: 0.03rem;height:  0.03rem">
        作品
    </div>
    <div style="float:left;margin: 0.01rem 0;width:0.09rem;height: 0.03rem">
        <img src="/Syzygy/static/imgs/page/c1.png" style="float:left;width: 0.03rem;height:  0.03rem">
        首页
    </div>
    <div style="float:left;margin: 0.01rem 0;width:0.09rem;height: 0.03rem">
        <img src="/Syzygy/static/imgs/page/c1.png" style="float:left;width: 0.03rem;height:  0.03rem">
        首页
    </div>
    <div style="float:left;margin: 0.01rem 0;width:0.09rem;height: 0.03rem">
        <img src="/Syzygy/static/imgs/page/c1.png" style="float:left;width: 0.03rem;height:  0.03rem">
        首页
    </div>
</div>
</div>
<!--    图片与右侧边栏 -->
<div style="width: 1rem;height: 1rem;margin: 0.01rem 0 0 0">
    <!--    图片-->
    <div style="float:left;background: rgb(240,240,240);width: 0.77rem;height:1rem;margin: 0 0.01rem">
        <!--    第一行    -->
        <div id="userHomePageLine1" style="float:left;width: 0.18rem;height:1rem;margin: 0 0.01rem">
        </div>
        <!--    第二行    -->
        <div id="userHomePageLine2" style="float:left;width: 0.18rem;height:1rem;margin: 0 0.01rem 0 0">
        </div>
        <!--    第三行    -->
        <div id="userHomePageLine3" style="float:left;width: 0.18rem;height:1rem;margin: 0 0.01rem 0 0">
        </div>
        <!--    第四行    -->
        <div id="userHomePageLine4" style="float:left;width: 0.18rem;height:1rem;margin: 0 0.01rem 0 0">
        </div>
    </div>
    <!--    右侧信息栏-->
    <div style="float:left;width: 0.20rem;height:1rem;margin: 0 0.01rem 0 0;font-size: 0.015rem">
        <div style="background-color: rgb(240,240,240);width: 0.21rem;height: 0.1rem;margin: 0 0 0.01rem 0">
            认证信息
        </div>
        <div style="background-color: rgb(240,240,240);width: 0.21rem;height: 0.2rem;margin: 0 0 0.01rem 0">
            公告
        </div>
        <div style="background-color: rgb(240,240,240);width: 0.21rem;height: 0.2rem;margin: 0 0 0.01rem 0">
            个人资料
        </div>
    </div>
</div>
<!--插入图文卡片-->
<script th:inline="javascript">
    const userHomePageLine1 = document.getElementById('userHomePageLine1');
    const userHomePageLine2 = document.getElementById('userHomePageLine2');
    const userHomePageLine3 = document.getElementById('userHomePageLine3');
    const userHomePageLine4 = document.getElementById('userHomePageLine4');
    const picturesByUserIdJSON = [[${picturesByUserIdJSON}]];
    let picturesByUserId = JSON.parse(picturesByUserIdJSON);
    for (let i = 0; i < picturesByUserId.length; i++) {
        if (picturesByUserId[i].state != 1){
            continue;
        }
        let userHomePagePictureDocumentName = picturesByUserId[i].pictureDocumentName;
        let cardStr = `
            <!-- 卡片 -->
            <div style="width: 0.18rem;">
                    <img src="/Syzygy/static/imgs/pictures/${userHomePagePictureDocumentName}"style="float:left;width: 0.18rem;margin:0 0 0.01rem 0">
            </div>
               `;
        if (i % 4 == 0) {
            userHomePageLine1.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 1) {
            userHomePageLine2.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 2) {
            userHomePageLine3.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 3) {
            userHomePageLine4.insertAdjacentHTML("beforeend", cardStr)
        }
    }
</script>
</body>
</html>